I had to have this functionality in order to have a good user experience with dropdowns that could be located all over the window. So I created a controller to handle this.

http://plnkr.co/edit/wzrfiP0vsvgkg3McUvh0?p=preview

Requires jQuery in order to find the child ul that contains all of the dropdown menu options.

When a dropdown hooked into the DropupController is clicked, the toggle method will check the dropdown's position in the window, the height of the dropdown container div, and the height of the dropdown menu ul element. It will also determine the window height.

Then it calculates if there's room to drop up and if there's room to drop down. If (yes and no), then it will drop up. Else, it will drop down.

This can be plugged into any dropdown on a page and each dropdown will act independently of each other. So, some long dropdowns could drop up while other shorter dropdowns on the same row could drop down. Each dropdown needs the DropupController initialized in it's parent container - div, td, whatever. If there's 4 dropdowns on a page, then you need to initialize DropupController 4 times.

I spent way too much time creating this functionality, so I'm sharing it to hopefully alleviate that time sink for others. If someone could figure out how to break the dependency on jQuery, that'd be great. I don't mind, since I'm using jQuery in my applications anyway.